(function ($) {
    var kendo = window.kendo, ui = kendo.ui, grid = ui.Grid;

    var DropDownTreeView = kendo.ui.Widget.extend({
        _uid: null,
        _treeView: null,
        _dropdown: null,
        _v: null,
        _valueObject: null,
        init: function (element, options) {
            var self = this;
            kendo.ui.Widget.fn.init.call(self, element, options);
            self._uid = new Date().getTime();
            var optionLabel = options.placeholder || "请选择...";
            $(element).attr("type", "hidden");
            $(element).before(kendo.format("<input id='extDropDown{0}' class='k-ext-dropdown'/>", self._uid));
            $(element).before(kendo.format("<div id='extTreeView{0}' class='k-ext-treeview' style='z-index:1;'/>", self._uid));
            self._dropdown = $(kendo.format("#extDropDown{0}", self._uid)).kendoDropDownList({
                dataSource: [{
                    text: "",
                    value: ""
                }],
                dataTextField: "text" || options.textField,
                dataValueField: "value" || options.valueField,
                optionLabel: optionLabel,
                value: "" || $(element).val(),
                open: function (e) {
                    e.preventDefault();
                    if (!$(element).attr("readonly")) {
                        if (!$treeViewRootElem.hasClass("k-custom-visible")) {
                            $treeViewRootElem.css({
                                "top": $dropdownRootElem.position().top + $dropdownRootElem.height(),
                                "left": $dropdownRootElem.position().left
                            });
                            $treeViewRootElem.slideToggle('fast', function () {
                                self._dropdown.close();
                                if (self._valueObject) $dropdownRootElem.find("span.k-input").text(self._valueObject[options.textField]);
                                $treeViewRootElem.addClass("k-custom-visible")
                            })
                        }
                    }
                }
            }).data("kendoDropDownList");
            var $dropdownRootElem = $(self._dropdown.element).closest("span.k-dropdown");
            self._treeView = $(kendo.format("#extTreeView{0}", self._uid)).kendoTreeView(options.treeView).data("kendoTreeView");
            self._treeView.bind("select", function (e) {
                $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
                $treeViewRootElem.slideToggle('fast', function () {
                    $treeViewRootElem.removeClass("k-custom-visible");
                    self.trigger("select", e);
                    if (options.change) {
                        $dropdownRootElem.trigger("change", options.change(e))
                    }
                });
                var treeValue = this.dataItem(e.node);
                self._valueObject = treeValue;
                self._v = treeValue[options.valueField];
                $(element).val(self._v);
                $(element).trigger("change")
            });
            var $treeViewRootElem = $(self._treeView.element).closest("div.k-treeview");
            $treeViewRootElem.css({
                "border": "1px solid #dbdbdb",
                "display": "none",
                "position": "absolute",
                "background-color": self._dropdown.list.css("background-color")
            });
            $(document).click(function (e) {
                if ($(e.target).closest("div.k-treeview").length === 0) {
                    if ($treeViewRootElem.hasClass("k-custom-visible")) {
                        $treeViewRootElem.slideToggle('fast', function () {
                            $treeViewRootElem.removeClass("k-custom-visible")
                        })
                    }
                }
            })
        },
        value: function (v) {
            var self = this;
            if (v !== undefined) {
                if (v === "" || v == null) {
                    $(self._dropdown.element).closest("span.k-dropdown").find("span.k-input").text("");
                    self._dropdown.value("")
                } else {
                    self._treeView.expand(".k-item");
                    setTimeout(function () {
                        var n = self._treeView.dataSource.get(v);
                        if (n) {
                            var selectNode = self._treeView.findByUid(n.uid);
                            self._treeView.select(selectNode);
                            self._treeView.trigger('select', {node: selectNode});
                            var $treeViewRootElem = $(self._treeView.element);
                            $treeViewRootElem.hide()
                        }
                    }, 800)
                }
            } else {
                return self._dropdown.value()
            }
        },
        dropDownList: function () {
            return this._dropdown
        },
        dataItem: function () {
            return this._valueObject;
        },
        treeView: function () {
            return this._treeView
        },
        refresh: function () {
            return this._treeView.dataSource.read()
        },
        options: {name: "DropDownTreeView"}
    });
    ui.plugin(DropDownTreeView);
})(jQuery);